<template>
  <div class="oilcard_index">
    <c-title :hide="false" text="IC卡"></c-title>
    <div class="cardDetail">
      <div class="txt">占位占位</div>
      <div class="cardPrice">
        <div class="priceTxt">余额</div>
        <div class="price"><span class="small">￥</span>100.00</div>
      </div>
    </div>
    <van-tabs v-model="active" line-width="20px" background="#F5F5F5">
      <van-tab title="充值记录" title-style="font-weight: bold;font-size: 0.94rem;color: #00001C;"></van-tab>
    </van-tabs>
    <div class="list">
      <div class="lis">
        <div class="top">
          <div class="top_l">门店：油站名称</div>
          <div class="top_r">¥26.8</div>
        </div>
        <div class="top">
          <div class="bottom_l">2023-08-28 15:35:32</div>
          <div class="bottom_r">卡余额：¥99</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0
    };
  }
};
</script>
<style lang="scss" scoped>
.oilcard_index {
  padding: 0.63rem 0.75rem;
  box-sizing: border-box;
  overflow: hidden;
  .list {
    display: flex;
    flex-direction: column;
    margin-top: 0.66rem;
    .lis {
      background: #ffffff;
      border-radius: 0.5rem;
      display: flex;
      flex-direction: column;
      padding: 0.97rem 0.75rem;
      box-sizing: border-box;
      margin-bottom: 0.63rem;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
        .top_l {
          font-weight: 500;
          font-size: 0.81rem;
        }
        .top_r {
          font-weight: 500;
          font-size: 0.88rem;
          color: #f15353;
        }
        .bottom_l {
          font-size: 0.81rem;
          color: #6e6e79;
        }
        .bottom_r {
          font-size: 0.81rem;
          color: #6e6e79;
        }
      }
      .top:last-child {
        margin-bottom: 0;
      }
    }
  }
  .cardDetail {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.94rem;
    .txt {
      font-size: 0.88rem;
      color: #00001c;
      text-align: left;
      margin-bottom: 1.16rem;
    }
    .cardPrice {
      display: flex;
      flex-direction: column;
      .price {
        display: flex;
        align-items: flex-end;
        font-weight: bold;
        font-size: 1.5rem;
        color: #00001c;
        line-height: 1.5rem;
        .small {
          font-size: 0.88rem;
          line-height: 1rem;
        }
      }
      .priceTxt {
        font-size: 0.88rem;
        color: #aaaab3;
        text-align: left;
      }
    }
  }
}
</style>
